import React from 'react';
import { withRouter } from 'react-router-dom';
import { Tools, SearchBar, Icon, Menu, Select, Popover } from 'weaver-mobile';
const Item = Popover.Item
// const getLabel = Tools.getLabel;
@withRouter
class MenuList extends React.Component {

  constructor(props) {
    super(props)
    this.state = { ...props }
  }

  componentWillMount() {

  }

  componentWillReceiveProps(newProps) {
    this.setState({
      ...newProps
    })
  }

  getSelectObj = (selectKey) => {
    const { data = [] } = this.state

    let selectObj = {}
    for (let i = 0; i < data.length; i++) {
      if (selectKey == data[i].key) {
        selectObj = data[i]
        break;
      }
    }

    return selectObj
  }

  onMenuListItemClick = (selectKey) => {
    const { onChange } = this.state

    this.setState({
      selectKey,
      showMenu: false
    })

    if (typeof onChange === "function") {
      onChange(selectKey)
    }
  }

  render() {
    const { data = [], width, showMenu, selectKey, showSelectText = true, placement = "bottomLeft", itemWith = 0, paddingHeight = 7, paddingWidth = 0, xOffset = 0, yOffset = 0 } = this.state
    return (
      <div className="workrelate-mobile-menulist" style={{ width }}>
        <Popover
          mask
          placement={placement}
          visible={showMenu}
          overlay={
            data.map((d, i) => {
              return <Item key={d.key} icon={<Icon type={d.iconclass} size="xs" color="#666" />} >{d.title}</Item>
            })
          }
          align={{
            overflow: { adjustY: 0, adjustX: 0 },
            offset: [xOffset, yOffset],
          }}
          onSelect={(node) => {this.onMenuListItemClick(node.key)}}
        >
          <div className="head-wrapper" style={{ paddingTop: paddingHeight, paddingBottom: paddingHeight, paddingRight: paddingWidth, paddingLeft: paddingWidth }} onClick={() => this.setState({ showMenu: !showMenu })}>
            <span className="icon-wrapper">
              <Icon type={this.getSelectObj(selectKey)["iconclass"]} size="xxs" />
            </span>
            {
              showSelectText &&
              <span>{this.getSelectObj(selectKey)["title"]}</span>
            }
          </div>
        </Popover>
        {/* <div style={{ position: "absolute", border: "1px solid rgba(45, 183, 245, 1)", borderRadius: "3px", background: "#fff", padding: "7px 0", display: showMenu ? "block" : "none", zIndex: 999 }}>
          {
            data.map((d, i) => {
              return (
                <div key={d.key} style={{ padding: "7px 12px", display: "flex", alignItems: "center",minWidth:itemWith  }} onClick={() => {this.onMenuListItemClick(d.key)}}>
                  <span style={{ marginRight: "7px" }}>
                    <Icon type={ d.iconclass } size="xxs" />
                  </span>
                  <span style={{minWidth:"80px",display:"inline-block",whiteSpace:"nowrap"}}>{d.title}</span>
                </div>
              )
            })
          }
        </div> */}

        {/* 蒙层 */}
        <div
          style={
            {
              display: showMenu ? "block" : "none",
              width: window.innerWidth,
              height: window.innerHeight,
              zIndex: 9,
              position: "fixed",
              top: 0,
              left: 0,
              background: "rgba(0, 0, 0, 0.5)"
            }
          }
          onClick={() => { this.setState({ showMenu: false }) }}
        >
        </div>
      </div>
    )
  }
}

export default MenuList;